<script setup>
import { useUserStore } from '@/stores/user'
import { Tree, Modal, Message } from '@arco-design/web-vue'

const userStore = useUserStore()
const treeData = ref([])

// 加载权限树数据
const loadPermTree = async () => {
  try {
    // TODO: 对接后端API获取权限数据
    treeData.value = await userStore.fetchPermissions()
  } catch (error) {
    Message.error('权限数据加载失败')
  }
}

// 初始化加载
onMounted(loadPermTree)
</script>

<template>
  <a-card title="权限管理" class="perm-management-card">
    <div class="toolbar">
      <a-space>
        <a-button type="primary" @click="handleAddRoot">新增根权限</a-button>
        <a-button @click="handleRefresh">刷新</a-button>
      </a-space>
    </div>
    
    <a-tree 
      :data="treeData"
      blockNode
      showLine
      @select="handleNodeSelect"
    >
      <template #title="node">
        <span>{{ node.title }}</span>
        <span class="perm-code">{{ node.code }}</span>
      </template>
    </a-tree>
  </a-card>
</template>

<style scoped>
.perm-management-card {
  margin: 16px;
}
.toolbar {
  margin-bottom: 16px;
}
.perm-code {
  margin-left: 8px;
  color: var(--color-text-3);
  font-size: 12px;
}
</style>